<template>
<div id="add-goods">
    <header class="add-goods-header">
        <h3 class="add-goods-header-title">添加商品</h3>
        <ul class="step-container" ref='stepContainer'>
            <li
                v-for="(item, index) in stepList"
                :key='item.key'
                :data-components-name='item.componentsName'
                :class="['step-width', {
                    'step-width-active': index <= stepActive, 
                    'step-color-over': index < stepActive
                }]"
            >
                <ul>
                    <li 
                        :class="['step-number', {
                            'step-active': index <= stepActive, 
                            'step-over': index < stepActive
                        }]"
                    >
                        <div v-if='index >= stepActive'>{{item.key}}</div>
                        <div 
                            v-else 
                            style='font-size:20px;margin-left:-3px;margin-top:2px;'
                        >√</div>
                    </li>
                    <li>{{item.title}}</li>
                    <li 
                        :class="['step-line', {
                            'step-bgc-active': index < stepActive
                        }]"
                    ></li>
                </ul>
            </li>
        </ul>
    </header>
    <div class="add-goods-main">
        <div class="component-layout">
            <ul 
                class="component-link" 
                @click='handleClicChangeComponents'
            >
                <li 
                    v-for="item in componentsList" 
                    :key='item.name' 
                    :class="['link-item', { 
                        'link-active': componentsName === item.name
                    }]" 
                    :data-components-name='item.name'
                >{{item.title}}</li>
            </ul>
            <div class="component-content">
                <transition mode="out-in">
                    <keep-alive>
                        <component 
                            :is="componentsName" 
                            :goodsinfo.sync='newGoodsInfo'
                        ></component>
                    </keep-alive>
                </transition>
            </div>
        </div>
    </div>
    <footer class="add-goods-footer">
        <my-button 
            type='back' 
            link 
            :to="{name: 'goodsList'}"
        >返回</my-button>
        <my-button
            type='save'
            @click.native='handleClickSaveGoodsInfo'
        >保存</my-button>
            <!-- :disabled='!goodsName || !goodsPrice || !goodsWeight' -->
    </footer>
</div>
</template>

<script>
const GoodsBaseInfo = () => import('./GoodsBaseInfo')
const GoodsParams = () => import('./GoodsParams')
const GoodsAttr = () => import('./GoodsAttr')
const GoodsImage = () => import('./GoodsImage')
const GoodsContent = () => import('./GoodsContent')
import { Local } from '../../common'
import { 
    GOODS_LIST
} from '../../config/localConstant'
import { 
    addGoods 
} from '../../config/data'
import { messageTip } from '../JS'
export default {
    name: 'addGoods',
    data() {
        return {
            componentsName: 'GoodsBaseInfo',
            stepActive: 0,
            goodsInfo: {
                cateLenBool: false, /* 是否三级分类 */
                cateId: '', /* 分类id */
                goods_name: '', /* 商品名称 */
                goods_cat: [],  /* 商品分类列表 (',') */
                goods_price: 0, /* 商品价格 */
                goods_number: 0, /* 商品数量 */
                goods_weight: 0, /* 商品重量 */
                goods_introduce: '', /* 商品介绍 */
                pics: [], /* 上传的图片临时路径 ([{pic: '...'}]) */
                attrs: [], /* 动态参数、静态属性('many'/'only') */
                attrList: [], /* 静态属性('only') */
                paramList: [], /* 动态参数('many') */
            }
        }
    },
    methods: {
        handleClicChangeComponents(e) {
            if(e.target.constructor === HTMLUListElement) return;
            if(this.componentsName === e.target.dataset.componentsName) return;
            if(!this.newGoodsInfo.cateLenBool) {
                messageTip({content: '请先选择商品分类！！'})
                return;
            }
            this.componentsName = e.target.dataset.componentsName
            let stepArr = Array.from(this.$refs.stepContainer.children)
            stepArr.forEach((s, i) => {
                if(s.dataset.componentsName === this.componentsName) {
                    this.stepActive = i
                }
            })
        },
        async handleClickSaveGoodsInfo() {
            let goodsObj = JSON.parse(JSON.stringify(this.goodsInfo))
            goodsObj.goods_cat = goodsObj.goods_cat.join(',')
            goodsObj.attrs = [
                ...goodsObj.paramList, ...goodsObj.attrList
            ].map(c => {
                return {
                    attr_id: c.attr_id,
                    attr_value: c.attr_vals
                }
            })
            let {
                cateId, cateLenBool, paramList, attrList, ...restObj 
            } = goodsObj
            let result = await addGoods(restObj)
            if(!result.fsBool) return;
            let { msg } = Local.get(GOODS_LIST.KEY)
            msg = msg ? msg : {}
            let count = msg[GOODS_LIST.SELECTED_PAGE_OF_COUNT]
            msg[GOODS_LIST.SELECTED_PAGE_NUMBER] = Math.ceil(Number(result.data.total) / count) || 1
            Local.set(GOODS_LIST.KEY, msg)
            messageTip({content: '商品添加成功！'})
            setTimeout(_ => this.$router.push({name: 'goodsList'}), 60)
        }
    },
    computed: {
        newGoodsInfo: {
            get() {
                return this.goodsInfo
            },
            set(val) {
                for (const key in val) {
                    this.goodsInfo[key] = val[key]
                }
            }
        },
        stepList() {
            return [
                {key: 1, title: '基本信息', componentsName: 'GoodsBaseInfo'},
                {key: 2, title: '商品参数', componentsName: 'GoodsParams'},
                {key: 3, title: '商品属性', componentsName: 'GoodsAttr'},
                {key: 4, title: '商品图片', componentsName: 'GoodsImage'},
                {key: 5, title: '商品内容', componentsName: 'GoodsContent'},
                {key: 6, title: '完成', componentsName: 'end'}
            ];
        },
        componentsList() {
            return [
                {title: '基本信息', name: 'GoodsBaseInfo'}, 
                {title: '商品参数', name: 'GoodsParams'}, 
                {title: '商品属性', name: 'GoodsAttr'}, 
                {title: '商品图片', name: 'GoodsImage'}, 
                {title: '商品内容', name: 'GoodsContent'}
            ];
        }
    },
    components: {
        GoodsBaseInfo,
        GoodsParams,
        GoodsAttr,
        GoodsImage,
        GoodsContent,
    }
}
</script>

<style scoped>
#add-goods {
    height: 100%;
}
.add-goods-header {
    height: 150px;
}
.add-goods-header-title {
    height: 50px;
    line-height: 50px;
}
.step-container {
    display: flex;
    align-items: center;
    height: 100px;
    color: rgba(0, 0, 0, 0.3);
    font-weight: bold;
}
.step-width {
    position: relative;
    width: 100%;
    min-width: 80px;
    text-align: center;
}
.step-number {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin: 0 auto 6px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    background-color: #fff;
    border-radius: 50%;
}
.step-line {
    position: absolute;
    top: 15px;
    right: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 2px;
    background-color: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}
.step-width:first-of-type .step-line {
    width: 0;
}
.step-width:nth-of-type(1),
.step-width-active {
    color: rgba(0, 0, 0, 0.8);
}
.step-color-over {
    color: rgba(45, 238, 103, 0.8) !important;
}
.step-width:nth-of-type(1) .step-number, 
.step-active {
    border-color: rgba(0, 0, 0, 0.8);
}
.step-over {
    border-color: rgba(45, 238, 103, 0.8) !important;
}
.step-bgc-active {
    background-color: rgb(45, 238, 103);
}
.add-goods-main {
    height: calc(100% - 200px);
}
.component-layout {
    display: flex;
    height: 100%;
}
.component-link {
    overflow: auto;
    width: 100px;
}
.component-link::-webkit-scrollbar {
    display: none;
}
.link-item {
    height: 42px;
    line-height: 42px;
    padding: 0 6px;
    text-align: center;
    border-right: 2px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    cursor: pointer;
    transition: color 0.32s, border-color 0.32s;
    box-sizing: border-box;
}
.link-item:hover,
.link-item.link-active {
    color: #108df3;
    border-color: #108df3;
}
.component-content {
    overflow: auto;
    flex: 1;
    padding: 12px;
    box-sizing: border-box;
}
.component-content::-webkit-scrollbar {
    display: none;
}
.add-goods-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    line-height: 50px;
}
.add-goods-footer :first-of-type {
    margin-right: 12px;
}
</style>